<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#map {
			width: 500px;
		}
		
		#content {
			height: 1400px;
		}
	</style>

	<body onscroll="getScroll()">
		<div ng-app="myapp" ng-controller="ts">
			<div style="position: fixed;top:0px;width: 100%;height: 100%;;z-index: 5000;" ng-mousedown="mouseDown(event)" ng-mouseover="mouseUp(event)" ng-mouseup="mouseUp(event)" ng-mousemove="mouseGet(event)" ng-cloak>
			</div>
			<div ng-cloak style="position: fixed;top:0px;width: 100%;height: 100%;background-color: white;z-index: 4000;">
				<div style="z-index: 5000;text-align: center;">
					<img id="changeimg" src="img/110832099563942299.jpg" width="1000px" style="min-width:1000px;margin: 0px auto;margin-top:{{changetopfix}}px;margin-left:{{changeleftfix}}px;z-index: 4100;" />
				</div>
			</div>
			<div style="height: 2000px;">
				
			</div>
		</div>
	</body>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = angular.module('myapp', []);
		app.controller('ts', function($scope) {
			$scope.enlargeImg = function(item) {
				$scope.changeshow = true;
				$scope.changeUrl = $scope.imgUrl + item.url;
			};
			var timeStart, timeEnd, time;
			$scope.startSet = [];
			$scope.mouseGetType = false;

			function getTimeNow() {
				var now = new Date();
				return now.getTime();
			};
			$scope.nowSetx = 0;
			$scope.nowSety = 0;
			$scope.mouseDown = function(event) {
				var e = event || window.event;
				//		$scope.nowSetx = e.clientX;
				//		$scope.nowSety = e.clientY;
				$scope.mouseGetType = true;
			};
			$scope.mouseUp = function(event) {
				var e = event || window.event;
				$scope.mouseGetType = false;
				$scope.changeleft = $scope.changeleft + e.clientX - $scope.nowSetx;
				$scope.changetop = $scope.changetop + e.clientY - $scope.nowSety;
			};
			$scope.changeleft = 0;
			$scope.changetop = 0;
			$scope.changetopfix = 20;
			$scope.changeleftfix = 0;
			$scope.mouseGet = function(event) {
				var e = event || window.event;
				if($scope.mouseGetType == true) {
					$scope.changeleftfix = $scope.changeleft + e.clientX - $scope.nowSetx;
					$scope.changetopfix = $scope.changetop + e.clientY - $scope.nowSety;
				} else {
					$scope.nowSetx = e.clientX;
					$scope.nowSety = e.clientY;
				}
			};
		});
		var scrollfix = 0; //初始值
		function getScroll() {
			var num = 3.5; //放大系数
			var img = document.getElementById("changeimg");
			img.width += ($(window).scrollTop() - scrollfix) * num;
			scrollfix = $(window).scrollTop();
		}
	</script>

</html>